<!-- 客户列表页 -->
<template>
	<view style="height: 100%;">
		<!-- 引入公共头部组件 -->
		<HeaderTitle title="客户" :rightTextColor="bgColor" :rightContent="rightText" :backgroundColor="bgColor"
			@selectRightIconChange="selectRightIconChange" @confirm="search" :isBack="false" :isSearch="true"
			@cancel="cancel" />

		<!-- 客户列表区域 -->
		<view style="padding-bottom: 50px;padding-top: 60px;">
			<view class="boxFormal" @click="Viewdetails(item.Id, item.cCusCode)" v-for="item in data" :key="item.Id"
				style="padding-right: 20rpx;">
				<view class="flex Jbetween" style="font-size:14px;padding: 20rpx 0;">
					<view style="padding-left: 20rpx;">{{ item.cCusName }}</view>
					<uni-tag style="border: none;" :text="getTagColorText('text',item.cCusType)"
						:custom-style="getTagColorText('color',item.cCusType)">
					</uni-tag>
				</view>
				<view class="code">
					<view style="width: 200px">客户编码：{{ item.cCusCode }}</view>
					<!-- <view style="">
						联系人：{{ item.cCusPerson ? item.cCusPerson : "无" }}
					</view> -->
				</view>
				<view class="code flex Jbetween">
					<view>备案人：{{ item.RealName }}</view>
					<view style="display: flex;"><text>备案时间：</text> <uni-dateformat :date="item.CreateTime"
							:format="'yyyy/MM/dd'"></uni-dateformat></view>
				</view>
			</view>

			<view style="padding-bottom: 20px;">
				<LoadingMore :status="status" :contentText="contentText" :rows="data"></LoadingMore>
			</view>

		</view>

		<!-- 首次加载检索提示 -->
		<!-- 	<view v-if="isSearchFormal" class="search-none" style="text-align: center;padding-top: 100px;">
			<img src="../../assets/search.png" alt="" />
			<h4 style="color:#6C6C6C;margin-top:5px">客户检索</h4>
		</view> -->
		<!-- 自定义底部导航栏组件 -->
		<pyh-tab></pyh-tab>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import {
		CustomerInfoGetDataList,
		GetDataListForCustomerInfoRetrieval
	} from '@/api/interface.js'
	// 引入顶部navbar组件
	import HeaderTitle from '@/components/header/header-title.vue'
	export default {
		components: {
			// 公共头部组件
			HeaderTitle
		},
		data() {
			return {
				// 顶部导航栏的高度
				statusBarHeight: 0,
				// 加载状态
				status: "loading",
				contentText: {
					contentdown: '轻轻上拉',
					contentrefresh: '努力加载中...',
					contentnomore: '实在没有了'
				},
				// 顶部导航栏右侧数据
				rightText: "",
				title: "",
				// 是否显示检索提示
				isSearchFormal: false,
				columnsType: [{
						name: "备案",
						Id: -1
					},
					{
						name: "潜在",
						Id: 0
					},
					{
						name: "正式",
						Id: 1
					},
					{
						name: "休眠",
						Id: 2
					}
				],
				// 顶部导航栏的高度计算
				BarHeight: 0,
				naviBarHeight: 0,
				value: "",
				columns: ["直销", "渠道", "代理"],
				showPicker: false,
				entity: {
					cCusTypeName: "备案客户"
				},
				info: {},
				loading: false,
				pagination: {
					// 当前页数
					current: 1,
					// 每页条数
					pageSize: 10,
					// 总条数
					Total: 0,
					showTotal: 0
				},
				Keyword: "",
				data: [],
				queryParams: {
					cCusName: "",
					cCusType: null,
					isAllData: true
				},
			};
		},
		onShow() {
			// 动态获取顶部导航栏的高度自适应搜索框
			const res = uni.getSystemInfoSync()
			// 获取手机类型
			const system = res.platform
			this.statusBarHeight = res.statusBarHeight
			// 根据手机类型适配顶部导航栏搜索框距离
			if (system === 'android') {
				this.BarHeight = (125 + this.statusBarHeight)
			} else if (system === 'ios') {
				this.BarHeight = (90 + this.statusBarHeight)
			}
			this.naviBarHeight = this.BarHeight - this.statusBarHeight
			console.log('获取手机导航栏高度', this.BarHeight, this.naviBarHeight, res)
			//  去除加载状态
			this.status = "noMore"
			// 首次加载显示检索提示
			this.isSearchFormal = true;
		},

		//下拉刷新
		onPullDownRefresh() {
			this.pagination.current = 1
			uni.stopPullDownRefresh();
			this.data = [];
			this.getDataList()
		},
		//上拉加载
		onReachBottom() {
			console.log('开始上拉加载了', this.status, this.pagination.current)

			if (this.status == 'noMore') {
				return;
			}
			this.pagination.current++;
			this.getDataList()
		},
		onHide() {
			this.cancel()
			console.log('页面卸载了', this.rightText)
		},
		computed: {
			...mapState(["UserInfo", "DeptId", "bgColor"]),
		},

		methods: {
			// 标签状态回调函数
			getTagColorText(key, state) {
				let color = ""
				let text = ""
				if (key === 'color') {
					if (state === -1) {
						color = "background-color: #1890FF"
					} else if (state === 0) {
						color = "background-color: #0AAA50"
					} else if (state === 1) {
						color = "background-color: #6CCD3D"
					} else if (state === 2) {
						color = "background-color: grey"
					} else if (state === 3) {
						color = "background-color: #ADD3F5"
					}
					return color
				} else {
					if (state === -1) {
						text = "备案中"
					} else if (state === 0) {
						text = "潜在"
					} else if (state === 1) {
						text = "正式"
					} else if (state === 2) {
						text = "休眠"
					} else if (state === 3) {
						text = "待转正"
					}
					return text
				}
			},
			// 列表跳转详情
			Viewdetails(Id, cCusCode) {
				uni.navigateTo({
					url: '/pages/formal/Viewdetails?Id=' + Id + '&cCusCode=' + cCusCode
				})
			},
			// 搜索框关闭按钮事件
			cancel() {
				this.queryParams.cCusName = ""
				this.rightText = ""
				// 清空搜索框的内容。从新调用接口
				// 清空列表数据
				this.data = [];
				this.status = "noMore"
			},
			// 右侧按钮点击
			selectRightIconChange() {
				console.log('右侧按钮点击了')
				uni.navigateTo({
					url: '/pages/formal/AddFormal'
				})
				// this.$refs.edit.openForm();
			},

			//搜索
			search(value) {
				this.queryParams.cCusName = value
				let length = (this.queryParams.cCusName).length
				if (this.queryParams.cCusName === "" || length == 1) {
					this.$errorToast('查询内容不能小于两个字')
					return
				}

				// 页数重置
				this.pagination.current = 1;
				// 列表数据清空
				this.data = [];
				this.status = "loading"
				// this.pagination.showTotal = 0
				// 是否显示页面加载
				// 关闭检索提示
				this.isSearchFormal = false;
				this.getDataList()
			},
			// 获取客户列表数据
			getDataList() {
				this.status = "loading"
				GetDataListForCustomerInfoRetrieval({
						// 当前页数
						PageIndex: this.pagination.current,
						// 每页显示10条
						PageRows: this.pagination.pageSize,
						SortField: "cCusCode",
						SortType: "desc",
						Search: this.queryParams
					})
					.then(resJson => {
						if (resJson.Success) {
							// 赋值总条数
							this.Total = resJson.Total;
							if (resJson.Data == null || resJson.Data.length == 0) {
								this.status = 'noMore'; // 没有更多数据
								// 没有搜索到客户的条件下显示备案右上角文字
								this.rightText = "备案"
								return
							}
							// 如果有的情况下清空有商家备案文字
							this.rightText = ""
							if (this.pagination.current == 1) {
								this.data = resJson.Data;
							} else {
								this.data = this.data.concat(resJson.Data);
							}
							this.data.forEach(item => {
								item.SNameList = item.SharerNameList ?
									item.SharerNameList.join("|") :
									"";
							});
							if (this.data.length >= resJson.Total) {
								this.status = 'noMore'; // 没有更多数据
							} else {
								this.status = 'loading'; // 没有更多数据
							}
						} else {
							this.$errorToast(resJson.Msg)
							this.status = 'noMore'; // 没有更多数据
						}
					});
			},
		}
	};
</script>

<style lang="less" scoped>
	.none-data {
		img {
			width: 60%;
			margin: 10px auto;
		}

		color: #777;

		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}

	.fixedbox {
		position: fixed;
		bottom: 0;
		right: 0;
		/* height: 50px; */
		background: #fff;
		width: 100vw;
	}

	.pagination {
		position: absolute;
		bottom: 5px;
		right: 20%;
	}

	.code {
		font-size: 13px;
		color: #777;
		padding-left: 20rpx;
	}

	.Foricon {
		color: blue;
		position: absolute;
		right: 8px;
	}

	.btn {
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.formalBox {
		// height: calc(100vh - 150px);
		padding-bottom: 50px;
		box-sizing: border-box;
		overflow: auto;
	}

	.companyName {
		padding-top: 10px;
		margin-left: 10px;
		margin-bottom: 5px;
		color: #000000;
		font-weight: 600;
		font-size: 18px;
		line-height: 1.8;
		display: flex;
		justify-content: start;
	}

	.companyAddress {
		padding-top: 10px;
		margin-left: 10px;

		color: #777;
		// font-weight: 600;
		// font-size: 18px;
		line-height: 1.3;
	}

	.boxFormal {
		box-shadow: 2px 2px 5px #ccc;
		border-radius: 5px;
		width: 95%;
		padding-bottom: 10px;
		margin: 10px auto;
	}
</style>